<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="css/common.css" rel="stylesheet" type="text/css"/>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <link href="css/user_style.css" rel="stylesheet" type="text/css"/>
    <link href="skins/all.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <!--    <script src="js/jquery-2.1.1.min.js"></script>-->
    <script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
    <script src="js/common_js.js" type="text/javascript"></script>
    <script src="js/footer.js" type="text/javascript"></script>
    <script src="layer/layer.js" type="text/javascript"></script>
    <!--<script src="js/iCheck.js" type="text/javascript"></script>-->
    <script src="js/custom.js" type="text/javascript"></script>

    <!--地址三级联动-->
    <script src="js/distpicker.data.js" type="text/javascript"></script>
    <script src="js/distpicker.js" type="text/javascript"></script>

    <!--导入vue 包-->
    <script src="vue/Vue.v2.6.12.js"></script>
    <!--自定义工具-->
    <script src="js/HttpUtil.js"></script>
    <!--    &lt;!&ndash;参数校验工具&ndash;&gt;
        <script src="validation-1.19.2/jquery.validate.min.js"></script>
        <script src="validation-1.19.2/localization/messages_zh.min.js"></script>-->
   <!-- <script>
        var cookie = getCookie("userMassage");
        if (null == cookie){
            //商家未登录
            alert("请先登录！");
            location.href="login.html";
        }
    </script>-->

    <title>用户中心-收货地址</title>

</head>

<body>
<head>
    <div id="header_top">
        <div id="top">
            <div class="Inside_pages">
                <div class="Collection"><a href="login.html" class="green">请登录</a> <a href="register.html"
                                                                                      class="green">免费注册</a></div>
                <div class="hd_top_manu clearfix">
                    <ul class="clearfix">
                        <li class="hd_menu_tit" data-addclass="hd_menu_hover"><a href="user_center.html">用户中心</a></li>
                        <li class="hd_menu_tit" data-addclass="hd_menu_hover"><a href="message_center.html">消息中心</a></li>
                        <li class="hd_menu_tit" data-addclass="hd_menu_hover"><a href="Cart.html">我的购物车</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="header" class="header page_style">
            <div class="logo"><a href="index.html"><img src="images/logo.png"/></a></div>

            <!--结束图层-->
            <div class="Search">
                <div class="search_list">
                    <ul>
                        <li class="current"><a href="#">产品</a></li>
                        <li><a href="#">信息</a></li>
                    </ul>
                </div>
                <div class="clear search_cur">
                    <input name="searchName" id="searchName" class="search_box" onkeydown="keyDownSearch()" type="text">
                    <input name="" type="submit" value="搜 索" class="Search_btn"/>
                </div>
                <div class="clear hotword">热门搜索词：香醋&nbsp;&nbsp;&nbsp;茶叶&nbsp;&nbsp;&nbsp;草莓&nbsp;&nbsp;&nbsp;葡萄&nbsp;&nbsp;&nbsp;菜油</div>
            </div>

        </div>

        <!--菜单栏-->
        <div class="Navigation" id="Navigation" style="padding-left: 420px;">
            <ul class="Navigation_name">
                <li><a href="index.html">首页</a></li>
                <li class="hour"><a href="半小时圈主页.html">半小时生活圈</a></li>
                <li><a href="产品-产品列表(预售).html">预售专区</a><em class="hot_icon"></em></li>
                <li><a href="店铺首页.html">好评商户</a></li>
                <li><a href="goodsList.html">热销活动</a></li>
                <li><a href="">联系我们</a></li>
            </ul>
        </div>
        <!-- <script>$("#Navigation").slide({titCell:".Navigation_name li",trigger:"click"});</script>-->
    </div>
</head>
<!--用户中心样式-->
<div class="user_style clearfix">
    <div class="user_center clearfix">
        <div class="left_style">
            <div class="menu_style">
                <div class="user_title"><a href="user_center.html">用户中心</a></div>
                <div class="user_Head">
                    <div class="user_portrait">
                        <a href="#" title="修改头像" class="btn_link"></a> <img src="images/people.png">
                        <div class="background_img"></div>
                    </div>
                    <div class="user_name">
                        <p><span class="name">化海天堂</span><a href="#">[修改密码]</a></p>
                        <p>访问时间：2016-1-21 10:23</p>
                    </div>
                </div>
                <!--菜单列表图层-->
                <div class="sideMen">
                    <dl class="accountSideOption1">
                        <dt class="transaction_manage"><em class="icon_1"></em>订单管理</dt>
                        <dd>
                            <ul>
                                <li><a href="user_order.html">我的订单</a></li>
                                <li><a href="address.html">收货地址</a></li>
                            </ul>
                        </dd>
                    </dl>
                    <dl class="accountSideOption1">
                        <dt class="transaction_manage"><em class="icon_2"></em>会员管理</dt>
                        <dd>
                            <ul>
                                <li><a href="user_information.html">用户信息</a></li>
                                <li><a href="#">用户信息</a></li>
                                <li><a href="#">我的收藏</a></li>
                                <li><a href="#">我的留言</a></li>
                                <li><a href="#">我的评论</a></li>
                            </ul>
                        </dd>
                    </dl>
                    <dl class="accountSideOption1">
                        <dt class="transaction_manage"><em class="icon_3"></em>账户管理</dt>
                        <dd>
                            <ul>
                                <li><a href="user_information.html">用户信息</a></li>
                                <li><a href="user_account_management.html">账户余额</a></li>
                                <li><a href="用户中心-消费记录.html">消费记录</a></li>
                                <li><a href="#">跟踪包裹</a></li>
                                <li><a href="#">资金管理</a></li>
                            </ul>
                        </dd>
                    </dl>
                </div>
                <script>jQuery(".sideMen").slide({
                    titCell: "dt", targetCell: "dd", trigger: "click"
                    , defaultIndex: 0, effect: "slideDown", delayTime: 300, returnDefault: true
                });</script>
            </div>
        </div>
        <!--右侧样式属性-->
        <div class="right_style">
            <!--==========================================================================================================-->

            <!--地址管理-->
            <div class="user_address_style" id="address_vue">
                <div class="title_style"><em></em>地址管理</div>
                <div class="add_address">
                    <span class="name">添加送货地址</span>
                    <!--==========================================================================================================-->
                    <table cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <td class="label_name">收&nbsp;货&nbsp;&nbsp;人：</td>
                            <td>
                                <input id="Name" v-model="userName" name="userName" type="text" class="add_text"
                                       style=" width:100px" placeholder="填写称呼"/>
                                <i>*</i>
                            </td>
                        </tr>
                        <tr>
                            <td class="label_name">所在地区：</td>
                            <td>
                                <div data-toggle="distpicker">
                                    <select id="province" v-model="province" data-province="---- 选择省 ----"></select>
                                    <select id="city" v-model="city" data-city="---- 选择市 ----"></select>
                                    <select id="district" v-model="district" data-district="---- 选择区 ----"></select>

                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="label_name">街道地址：</td>
                            <td><textarea id="detailed" placeholder="请填写详细地址" v-model="detailed" name="detailed" cols=""
                                          rows=""
                                          style=" width:500px; height:100px; margin:5px 0px"></textarea><i>*</i></td>
                        </tr>
                        <tr>
                            <td class="label_name">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;编：</td>
                            <td><input id="zipCode" v-model="zipCode" name="zipCode" type="text" class="add_text"
                                       style=" width:100px"/></td>
                        </tr>
                        <tr>
                            <td class="label_name">手&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机：</td>
                            <td><input id="phone" v-model="phone" name="phone" type="text" class="add_text"
                                       style=" width:200px"/>&nbsp;&nbsp;<i>*</i></td>
                        </tr>
                        <!--<tr class="moren_dz" style="color: #999">
                            <td class="label_name"></td>
                            <td><label><input name="" type="checkbox" v-model="setDefault" value="" />设置为默认地址</label></td>
                        </tr>-->
                        <tr>
                            <td colspan="2" class="center">
                                <input name="" type="button" v-on:click="saveAddress()" value="保存" class="add_dzbtn"/>
                                <input name="" type="reset"  v-on:click="currentAddress()" value="当前地" class="reset_btn"/>
                            </td>
                        </tr>
                    </table>
                </div>

                <!--==========================================================================================================-->
                <!--用户地址-->
                <div class="address_content">

                    <table cellpadding="0" cellspacing="0" class="user_address" width="100%" >
                        <thead>
                        <tr class="label">
                            <td>默认收货人</td>
                            <td>默认所在地</td>
                            <td>默认详细地址</td>
                            <td>默认邮编</td>
                            <td>默认电话手机</td>
                        </thead>
                        <tbody>
                        <tr  id="defaultShow">
                            <td>{{addressDefault.userName}}</td>
                            <td>{{addressDefault.province}}{{addressDefault.city}}{{addressDefault.district}}</td>
                            <td>{{addressDefault.detailed}}</td>
                            <td>{{addressDefault.zipCode}}</td>
                            <td>{{addressDefault.phone}}</td>
                        </tr>
                    </table>

                    <table cellpadding="0" cellspacing="0" class="user_address" width="100%">
                        <!--<input name="" type="button" onclick="refresh()" value="刷新"/>-->
                        <thead>
                        <tr class="label">
                            <td>收货人</td>
                            <td>所在地</td>
                            <td>详细地址</td>
                            <td>邮编</td>
                            <td>电话手机</td>
                            <td>操作</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(address,index) in addressList" v-if="address.addressId!=addressDefault.addressId">
                            <td>{{address.userName}}</td>
                            <td>{{address.province}}{{address.city}}{{address.district}}</td>
                            <td>{{address.detailed}}</td>
                            <td>{{address.zipCode}}</td>
                            <td>{{address.phone}}</td>
                            <!--<td>个人</td>-->
                            <!--<td><a href="#">修改</a> | <a href="#">删除</a></td>-->
                            <td>
                                <!--<input class="btn" @click="deleteById(goods)" type="button" value="修改">-->
                                <input class="btn" v-if="address.addressId!=addressDefault.addressId" v-on:click="setAddressToDefault(address,index)" type="button" value="设为默认">
                                <input class="btn" v-if="address.addressId!=addressDefault.addressId" v-on:click="deleteAddress(address)" type="button" value="删除">
                            </td>
                        </tr>
                        </tbody>

                        <thead>


                        </thead>
                    </table>
                </div>

            </div>
        </div>
        <!--==========================================================================================================-->
    </div>
</div>


<!--网站地图-->
<div class="fri-link-bg clearfix">
    <div class="fri-link">
        <div class="logo left margin-r20"><img src="images/fo-logo.jpg" width="152" height="81"/></div>
        <div class="left"><img src="images/qd.jpg" width="90" height="90"/>
            <p>扫描下载APP</p>
        </div>
        <div class="">
            <dl>
                <dt>新手上路</dt>
                <dd><a href="#">售后流程</a></dd>
                <dd><a href="#">购物流程</a></dd>
                <dd><a href="#">订购方式</a></dd>
                <dd><a href="#">隐私声明 </a></dd>
                <dd><a href="#">推荐分享说明 </a></dd>
            </dl>
            <dl>
                <dt>配送与支付</dt>
                <dd><a href="#">保险需求测试</a></dd>
                <dd><a href="#">专题及活动</a></dd>
                <dd><a href="#">挑选保险产品</a></dd>
                <dd><a href="#">常见问题 </a></dd>
            </dl>
            <dl>
                <dt>售后保障</dt>
                <dd><a href="#">保险需求测试</a></dd>
                <dd><a href="#">专题及活动</a></dd>
                <dd><a href="#">挑选保险产品</a></dd>
                <dd><a href="#">常见问题 </a></dd>
            </dl>
            <dl>
                <dt>支付方式</dt>
                <dd><a href="#">保险需求测试</a></dd>
                <dd><a href="#">专题及活动</a></dd>
                <dd><a href="#">挑选保险产品</a></dd>
                <dd><a href="#">常见问题 </a></dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd><a href="#">保险需求测试</a></dd>
                <dd><a href="#">专题及活动</a></dd>
                <dd><a href="#">挑选保险产品</a></dd>
                <dd><a href="#">常见问题 </a></dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd><a href="#">保险需求测试</a></dd>
                <dd><a href="#">专题及活动</a></dd>
                <dd><a href="#">挑选保险产品</a></dd>
                <dd><a href="#">常见问题 </a></dd>
            </dl>

        </div>
    </div>
</div>
<!--网站地图END-->
<!--网站页脚-->
<!--<div class="copyright">
    <div class="copyright-bg">
        <div class="hotline">为生活充电在线 <span>招商热线：****-********</span> 客服热线：400-******</div>
        <div class="hotline co-ph">
            <p>版权所有Copyright ©***************</p>
            <p>*ICP备***************号 不良信息举报</p>
            <p>总机电话：****-*********/194/195/196 客服电话：4000****** 传 真：********

                <a href="http://www.mycodes.net/" target="_blank">源码之家</a></p>
        </div>
    </div>
</div>-->
</body>
</html>


<script>

    let vm = new Vue({
        el: '#address_vue',

        data: {
            //收货人
            userName: "",
            //省
            province: "",
            //市
            city: "",
            //区
            district: "",
            //详细地址
            detailed: "",
            //邮编
            zipCode: "",
            //电话
            phone: "",
            //地址数据
            addressList: "",
            //默认地址
            addressDefault: "",

        },
        methods: {

            //添加
            saveAddress: function () {
                let addname = /[\u4e00-\u9fa5_a-zA-Z0-9_]{1,15}/;
                let namevals = document.getElementById("Name").value;
                console.log(namevals);
                if (!addname.test(namevals)) {
                    alert("输入1-15个字母、数字")
                    return false
                }
                let adddetailed = /[\u4e00-\u9fa5_a-zA-Z0-9_]{1,30}/;
                let detailedvals = document.getElementById("detailed").value;
                if (!adddetailed.test(detailedvals)) {
                    alert("输入1-30个内容")
                    return false
                }
                let addphone=/^[1][0-9]{10}$/;
                let phonevals = document.getElementById("phone").value;
                if(!addphone.test(phonevals)){
                    alert("请输入正确的手机号")
                    return false;
                }
                var cookie = getCookie("userMassage");
                console.log(cookie)
                var parse = JSON.parse(cookie);
                var userId = parse.userID;
                let url = "/address/addAddress.do";
                let params = {
                    userName: this.userName, province: this.province, city: this.city,
                    district: this.district, detailed: this.detailed,
                    zipCode: this.zipCode, phone: this.phone, userId,
                };
                let This = this;
                postWithParams(url, params, function (data) {

                    This.addressList.push(params),
                    location.reload();  /*需要location.reload()的原因，当前用户无任何地址时，前端显示会有问题，所以需要这句话*/
                    if (data != 1) {
                        alert("繁忙中！");
                        return;
                    }
                })

            },

            //当前地
            currentAddress:function(){
                let url = "/address/getAddressIp.do";
                let This = this;
                get(url,function (e) {
                    let a = e;
                    let p = a.content.address_detail.province;
                    let c = a.content.address_detail.city;
                    let add = a.content.address;
/*                    This.province = p;
                    This.city = c;*/
                    This.detailed = add;

                    console.log("获取到的ip信息:"+p)
                    console.log("获取到的ip信息:"+c)
                    console.log("获取到的ip信息:"+add)

                })
            },

            //默认地址
            setAddressToDefault: function (address,index) {
                let url = "/address/addressToDefault.do";
                let This = this;
                var s = JSON.stringify(address);
                console.log("设为默认JSON:"+s)
                postWithJson(url, address, function (data) {
                    /*This.addressDefault = address;*/
                    // location.reload();
                    This.refreshAddressList();
                })
            },

            //展示
            refreshAddressList: function () {
                //发起请求
                let url = "/address/queryByUserIdGetAllAddress.do";
                var cookie = getCookie("userMassage");
                var parse = JSON.parse(cookie);
                var userId = {userId: parse.userID};
                let This = this;
                postWithParams(url, userId, function (data) {
                    This.addressList = data;
                    This.showDefault();

                })

            },

            showDefault:function(){
                var cookie = getCookie("userMassage");
                let This = this;
                console.log(cookie)
                var parse = JSON.parse(cookie);
                var userId = {userId: parse.userID};
                let url2 = "/address/queryByUserIdForDefault.do";
                postWithParams(url2, userId, function (data) {
                    This.addressDefault = data;
                    /*location.reload();*/
                })

            },

            //删除
            deleteAddress: function (address) {
                //发起请求
                let url = "/address/deleteByAddressId.do";
                let This = this;
                postWithParams(url, address, function (data) {
                    This.refreshAddressList();
                })
            },

        },
        mounted: function () {
            this.refreshAddressList();
        }

    });

</script>

